@charset "UTF-8";
.head-pd {
  position: relative;
  padding-top: 60px;
}

.header-wrap {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  background-color: $gray-base;
  height: 60px;
  line-height: 60px;
  -webkit-animation-duration: .5s;
  -moz-animation-duration: .5s;
  -o-animation-duration: .5s;
  animation-duration: .5s;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
  .logo-wrap {
	float: left;
	font-size: 30px;
	.logo {
	  color: $brand-warning;
	}
  }
  .nav {
	float: left;
	margin: 0;
	li {
	  float: left;
	  display: inline-block;
	  font-size: 16px;
	  a {
		display: inline-block;
		line-height: 60px;
		padding: 0 20px;
		color: #999;
		@include transition(background-color 0.3s ease 0s);
		&:hover {
		  background-color: #363c41;
		  color: #fff;
		}
	  }
	  &.active a {
		background-color: #363c41;
		color: #fff;
	  }
	}
  }
}

// 子导航
.sub-navbar {
  position: relative;
  z-index: 100;
  background-color: #fff;
  min-height: 40px;
  line-height: 40px;
  color: $gray-dark;
  @include box-shadow(0px 1px 2px #C5C5C5);
  ul {
	margin: 0;
	padding-left: 165px;
  }
  li {
	float: left;
	margin-right: 40px;
	&.cur a {
	  color: $brand-warning;
	}
  }
  .navbar-form {
	position: relative;
	margin-top: 7px;
	.form-control {
	  height: 26px;
	  line-height: 26px;
	  background-color: #EDEFF0;
	  padding-top: 0;
	  padding-bottom: 0;
	  border: 1px solid transparent;
	  &:focus {
		box-shadow: none;
		background-color: #fcfcfc;
		border: 1px solid #EDEFF0;
		@include transition(all 0.3s ease-in-out 0s);
	  }
	}
	.btn-search {
	  position: absolute;
	  top: -7px;
	  right: 15px;
	  width: 30px;
	}
  }
}

// 下拉菜单
.menu {
  position: relative;
  .menu-hd {
	position: relative;
	padding-right: 20px;
	color: #999;
	i {
	  position: absolute;
	  top: 8px;
	  right: 0;
	  width: 0;
	  height: 0;
	  font-size: 0;
	  border: 5px solid transparent;
	  border-top: 5px solid #999;
	  @include transition(transform .2s ease-in);
	}
  }
  .menu-bd {
	position: absolute;
	top: 55px;
	left: 5px;
	z-index: 9999;
	display: none;
	width: 110px;
	line-height: 2.2;
	background-color: #111;
	color: #999;
	text-align: center;
	padding: 10px 0;
	border-radius: 2px;
	border: 1px solid #444;
	@include box-shadow(1px 2px 2px rgba($gray-base, .3));
	i {
	  position: absolute;
	  top: -16px;
	  right: 46px;
	  width: 0;
	  height: 0;
	  font-size: 0;
	  border: 8px solid transparent;
	  border-bottom-color: #444;
	}
	a {
	  display: block;
	  padding: 0 20px;
	  color: #999;
	  &:hover {
		background-color: #444;
	  }
	}
  }
  &:hover {
	.menu-hd i {
	  -moz-transform: rotate(180deg);
	  -moz-transform-origin: 50% 30%;
	  -webkit-transform: rotate(180deg);
	  transform: rotate(180deg);
	  @include transform-origin(50% 30%);
	}
	.menu-bd {
	  display: block;
	}
  }
}
.mem-login {
  float: right;
  @include clearfix();
  li {
	float: left;
	display: inline-block;
  }
  .btn-reg {
	padding: 4px 12px;
	color: #fff;
	//border-radius: 2px;
	background-color: $brand-warning;
	margin-right: 10px;
  }
  .btn-login {
	padding: 4px 12px;
	color: $gray-base;
	//border-radius: 2px;
	background-color: #F2F2F2;
  }

  // 我要发布
  .menu-mypub {
	margin-right: 20px;
	.menu-bd {
	  left: -20px;
	}
  }
}

// 首页导航
#head-index {
  height: 455px;
  overflow: hidden;
  .header-wrap {
	background-color: transparent;
	.nav li {
	  a {
		color: #fff;
		&:hover {
		  background-color: transparent;
		  color: $brand-warning;
		}
	  }
	}
  }
  .mem-login {
	.menu-hd {
	  color: #fff;
	  i {
		border-top-color: #fff;
	  }
	}
	.menu-bd {
	  background-color: #fff;
	  border-color: #fff;
	  i {
		border-bottom-color: #fff;
	  }
	  a {
		color: $gray;
		&:hover {
		  background-color: #f2f2f2;
		}
	  }
	}
  }
  .sub-navbar {
	display: none;
  }
  .search-wrap {
	color: #fff;
  }
  .slideDown {
	background-color: #000;
  }
}

// 首页导航
#head-home {
  height: 380px;
  overflow: hidden;
  .header-wrap {
	background-color: transparent;
	.nav li {
	  a {
		color: #fff;
		&:hover {
		  background-color: transparent;
		  color: $brand-warning;
		}
	  }
	}
  }
  .mem-login {
	.menu-hd {
	  color: #fff;
	  i {
		border-top-color: #fff;
	  }
	}
	.menu-bd {
	  background-color: #fff;
	  border-color: #fff;
	  i {
		border-bottom-color: #fff;
	  }
	  a {
		color: $gray;
		&:hover {
		  background-color: #f2f2f2;
		}
	  }
	}
  }
  .sub-navbar {
	display: none;
  }
  .search-wrap {
	color: #fff;
  }
  .slideDown {
	background-color: #000;
  }
}

// 微下滚动导航效果
%slideDown{
  .slideDown {
	.nav li {
	  a {
		color: #999;
		&:hover {
		  background-color: transparent;
		  color: $brand-warning;
		}
	  }
	}
	.mem-login {
	  .menu-hd {
		color: #999;
		i {
		  border-top-color: #999;
		}
	  }
	  .menu-bd {
		background-color: $gray-base;
		border-color: #444;
		i {
		  border-bottom-color: #444;
		}
		a {
		  color: #999;
		  &:hover {
			background-color: #444;
		  }
		}
	  }
	}
  }
}
#head-index {
  @extend %slideDown;
}

#head-home {
  @extend %slideDown;
}

// 搜索导航
#head-search {
  //height: 455px;
  overflow: hidden;
  .header-wrap {
	background-color: transparent;
	.nav li {
	  a {
		color: $gray-dark;
		&:hover {
		  background-color: transparent;
		  color: $brand-warning;
		}
	  }
	}
  }
  .mem-login {
	.menu-hd {
	  color: $gray-dark;
	  i {
		border-top-color: $gray-dark;
	  }
	}
	.menu-bd {
	  background-color: $gray-dark;
	  border-color: $gray-dark;
	  i {
		border-bottom-color: $gray-dark;
	  }
	  a {
		color: $gray;
		&:hover {
		  background-color: $gray-light;
		}
	  }
	}
  }
  .sub-navbar {
	display: none;
  }
  .search-wrap {
	height: 305px;
	//color: #fff;
  }
  .slideDown {
	background-color: #000;
	.nav li a {
	  color: #999;
	}
	.mem-login {
	  .menu-hd {
		color: #999;
		i {
		  border-top-color: #999;
		}
	  }
	  .menu-bd {
		background-color: #111;
		border-color: #444;
		i {
		  border-bottom-color: #444;
		}
		a {
		  color: #999;
		  &:hover {
			background-color: #444;
		  }
		}
	  }
	}
  }
}

@-webkit-keyframes slideDown {
  0% {
	-webkit-transform: translateY(-4em)
  }

  100% {
	-webkit-transform: translateY(0)
  }

}

@-moz-keyframes slideDown {
  0% {
	-moz-transform: translateY(-4em)
  }

  100% {
	-moz-transform: translateY(0)
  }

}

@-o-keyframes slideDown {
  0% {
	-o-transform: translateY(-4em)
  }

  100% {
	-o-transform: translateY(0)
  }

}

@keyframes slideDown {
  0% {
	transform: translateY(-4em)
  }

  100% {
	transform: translateY(0)
  }

}

.header-wrap.slideDown {
  -webkit-animation-name: slideDown;
  -moz-animation-name: slideDown;
  -o-animation-name: slideDown;
  animation-name: slideDown
}

.head-mask, .head-poster {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9;
}

.head-mask {
  background: $gray-base;
  @include opacity(.4);
  z-index: 99;
}

.head-poster {
  background-repeat: no-repeat;
  background-position: top center;
}